<template>
  <div class="swipe-lunbo">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in imgs" :key="index">
        <img :src="item.pic" alt="" class="swipeimg" />
      </van-swipe-item>
    </van-swipe>
    <div class="daojishi" @click="tiao('index')">倒计时{{ num }}S</div>
  </div>
</template>

<script>
let t = null;
import { mixin } from "@/utils";
export default {
  name: "Guifu",
  mixins: [mixin],
  data() {
    return {
      num: 5,
      imgs: [],
    };
  },
  methods: {
    getimg() {
      this.$axios.get("http://47.104.209.44:3333/banner?type=2").then((res) => {
        // console.log(res);

        // 下次 DOM 更新循环结束之后执行延迟回调
        // 延迟执行 settimeout
        this.$nextTick(function () {
          this.imgs = res.data.banners.slice(0, 5);
        });
      });
    },
  },
  created() {
    this.getimg();

    //利用cookie改页面一个星期只能看一次
    let visitTime = this.getCookie("visitTime");
    console.log("本周已经浏览过guifu页面了", visitTime);
    if (visitTime) {//如果存在visitTime就直接跳到mine页面
      this.tiao("index");
    }else{
      this.setCookie('visitTime',1,7)//7天只看一次
    }
  },
  mounted() {
    t = setInterval(() => {
      if (this.num > 0) {
        this.num--;
      } else {
        clearInterval(t);
        this.tiao('index')
      }
    }, 1000);
  },
  destroyed() {
    clearInterval(t);
    t = null;
  },
};
</script>
<style>
.swipe-lunbo {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.swipeimg {
  width: 100%;
  height: 100%;
}
.daojishi {
  width: 80px;
  height: 20px;
  line-height: 20px;
  color: #fff;
  border: 1px #ccc solid;
  border-radius: 10px;
  position: absolute;
  top: 0;
  right: 0;
}
</style>